<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-12-27 10:18:43
-->
<template>
  <a-layout class="h-screen flex flex-col overflow-hidden">
    <a-layout-header class="h-20 bg-red-600">
      <div class="h-full">userName is: {{userName}}</div>
    </a-layout-header>
    <a-layout class="flex-1 border overflow-hidden">
      <a-layout-sider class="h-full border-r-2 border-gray-200">
        <aside class="h-full overflow-auto">
          <a-menu mode="inline">
            <a-sub-menu key="sub1">
              <template #title>Main Menus</template>
              <a-menu-item
                key="1"
                @click="routerJump('home')"
              >Home</a-menu-item>
              <a-menu-item
                key="2"
                @click="routerJump('about')"
              >About</a-menu-item>
            </a-sub-menu>
            <a-menu-item
              key="3"
              @click="routerJump('tailwindStart')"
            >Tailwind Start</a-menu-item>
            <a-sub-menu key="key4">
              <template #title>WebGL</template>
              <a-menu-item
                key="4"
                @click="routerJump('threejs')"
              >three.js</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </aside>
      </a-layout-sider>
      <a-layout-content class="overflow-auto">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()
const userName = computed(() => {
  return store.state.user.name
})
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const routerJump = (routeName) => {
  router.push({ path: `/mainMenu/${routeName}` })
}
</script>